function reactive(obj) {
  const proxy = new Proxy(obj, {
    get(target, key) {
      /*
        render函数第一次渲染的时候会获取引用的值 所以第一次渲染就会走到这个 get 方便我们开始做依赖收集
      */
      track(target, key)
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      console.log('proxy', key)
      /*
        修改的时候，去依赖收集的数据结构中 找到对应的key 把 key 对应的 更新函数都执行一遍，这就触发了页面的响应式
      */
      trigger(target, key)
      // app.update()
    }
    /*
      proxy 的优势出了可以监听get 和 set之外 还是可以监听另外十多种情况，这个是Object.defineProperty()做不到的
        这个是语言层面上的升级
    */
  })
  return proxy
}

// 副作用函数 -- 这里是为了暂时的存放每一个副作用函数，当副作用函数已经和依赖关系建立好了之后再清除空间
const effectStack = []

function effect(fn) {
  const eff = function () {
    try {
      effectStack.push(eff)
      fn()
    } finally {
      effectStack.pop()
    }
  }
  eff()
  return eff
}

// 依赖收集函数 
/*
  依赖收集的数据结构是这样的
  {
    state:{
      title:[effect,effect] // effect 对应的就是一个个的更新函数，每个响应式对象的值都是存着更新函数的数组，当这个值变化的时候遍历执行数组里面的一个个effect函数
    }
  }
*/
const trackMap = {}

function track(target, key) {
  /* 
    effectStack 是临时存放副作用函数的地方，每次关系建立完成之后就会再清空掉，所以获取数组的最后一个元素即可
  */
  const effect = effectStack[effectStack.length - 1]
  if (effect) {
    let map = trackMap[target]
    if (!map) {
      map = trackMap[target] = {}
    }

    let deps = map[key]
    if (!deps) {
      deps = map[key] = []
    }

    // 将副作用函数放入 deps
    if (deps.indexOf(effect) === -1) {
      deps.push(effect)
    }
  }
}

function trigger(target, key) {
  const map = trackMap[target]
  if (map) {
    const effects = map[key]
    effects.forEach(effect => effect())
  }

}

function h(target, props, children) {
  // 创建虚拟DOM的函数
  return {
    target,
    props,
    children
  }
}

function createApp(config) {
  let app = {}
  app.mount = function (id) {
    this.rootDOM = document.getElementById(id)

    if (!config.render) {
      config.render = this.compile(this.rootDOM.innerHTML)
    }

    if (config.setup) {
      this.setupCtx = config.setup()
    } else {
      this.dataCtx = config.data()
    }

    this.proxy = new Proxy(this, {
      get(target, key) {
        if (key in target.setupCtx) {
          return target.setupCtx[key]
        } else {
          return target.dataCtx[key]
        }
      },
      set(target, key, value) {
        if (key in target.setupCtx) {
          target.setupCtx[key] = value
        } else {
          target.dataCtx[key] = value
        }
      }
    })

    this.update = effect(() => {
      // render 函数的结果是一个 vnode
      const vnode = config.render.call(this.proxy)
      if (!this.isMounted) {
        // 首次挂载
        const el = this.createEle(vnode)
        this.__node = vnode
        this.rootDOM.innerHTML = ''
        this.rootDOM.appendChild(el)
      } else {
        // 更新
        this.patch(this.__node, vnode)
        this.__node = vnode
      }
    })

    this.update()

    this.isMounted = true // 已经挂载成功

    return this
  }
  app.compile = function (template) {
    return function () {
      // 真实DOM操作
      // const h3 = document.createElement('h3')
      // h3.textContent = this.title
      // return h3

      // 采用虚拟dom
      const vnode = h('h3', null, this.title)
      return vnode
    }
  }

  app.createEle = function (vnode) {
    let el = document.createElement(vnode.target)
    // 先忽略掉属性
    // vnode.props
    if (typeof vnode.children === 'string') {
      // 文本
      /*
          {
            h('h3',null,this.title)
          }
      */
      el.textContent = vnode.children
    } else {
      // 是数组，数组里面是子虚拟DOM
      /*
        {
          h('h3',null,[
            h('p',null,this.title),
            h('p',null,this.title),
            h('p',null,this.title)
          ])
        }
      */
      vnode.children.forEach(node => {
        // 递归调用
        el.appendChild(this.createEle(node))
      })
    }
    vnode.el = el
    return el
  }

  app.patch = function (node1, node2) {
    // 这里就是有涉及到 diff 算法了，但是我只会最简单的部分
    // 这步很重要，把每次node1绑定的元素再赋值给node2的元素，这样才可以每次都保持更新元素
    const el = node2.el = node1.el
    let child1 = node1.children,
      child2 = node2.children
    // 两次虚拟dom比对，只更新变化的
    console.log(node1, node2)
    if (typeof node1.children === 'string') {
      if (typeof node2.children === 'string') {
        if (child1 !== child2) {
          el.textContent = child2
        }
      } else {
        // 变成了数组 -- 遍历虚拟dom转换成真实dom 再插入
        el.innerHTML = ''
        child2.forEach(child => el.appendChild(document.createElement(child)))
      }
    } else {
      // node1 是数组
      if (typeof node2.children === 'string') {
        el.textContent = child2
      } else {
        // 两个虚拟dom都是数组，这里就需要数组之间的比对了
      }
    }
  }

  return app
}